<template>
    <div>
        
        <div class="demo-dropdown-wrap">
            <span class="title1">专业名称：</span>
            <span class="cont1">供电专业</span>
            &nbsp
            <span class="gropname">机构名称：</span>  
            <a-dropdown>
                <template #overlay>
                    <a-menu @click="handleMenuClick">
                    <a-menu-item key="1">                 
                        郑州供电车间
                    </a-menu-item>
                    <a-menu-item key="2">
                        郑州接触网维修工区
                    </a-menu-item>
                    <a-menu-item key="3">
                        五里堡接触网运行工区
                    </a-menu-item>
                    </a-menu>
                </template>
                <a-button>
                    郑州供电车间
                    <DownOutlined />
                </a-button>
            </a-dropdown>
            <a-button type="primary" class="searchbtn">
                查询
            </a-button>
        </div>

        <div class="notice">
            <div class="center">
                <span style="font-weight: 400;">提醒：郑州供电车间11班组编号为</span>  <span style="font-weight: 700;">1</span> <span style="font-weight: 400;">的</span>  <span style="font-weight: 700;">验电器 已报废</span>
            </div>
            <div class="btncenter">
                <a-button type="primary" class="infodetail">详情查看</a-button>
            </div>          
        </div>

    </div>
</template>

<script>
import { defineComponent } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
export default defineComponent({
    
    components: {
      DownOutlined,
    },
    setup() {
      const handleMenuClick = e => {
        console.log('click', e);
      };
      return {
        handleMenuClick
      };
    },
  }); 
</script>

<style>
.title1 {
    font-size: 24px;
    font-weight:bold ;
}

.cont1{
    font-size: 24px;  
}
.gropname{
    font-size: 24px;
    font-weight: 700;
}
</style>